<template>
  <view>
    <u-tabbar
      :value="value"
      :fixed="true"
      :placeholder="true"
      activeColor="#ff8f33"
      inactiveColor="#151826"
      :safeAreaInsetBottom="true"
      :border="false"
      zIndex="99"
      @change="clickTabbar"
    >
      <u-tabbar-item text="首页" >
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="../../static/tabbar/1-2.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="../../static/tabbar/1-1.png"
        ></image>
      </u-tabbar-item>
      <u-tabbar-item text="社区">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="../../static/tabbar/2-2.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="../../static/tabbar/2-1.png"
        ></image>
      </u-tabbar-item>
      <u-tabbar-item text="管家" :dot="showDot" badgeStyle="background-color: #ee3c37;">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="../../static/tabbar/3-2.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="../../static/tabbar/3-1.png"
        ></image>
      </u-tabbar-item>
      <u-tabbar-item text="我的">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="../../static/tabbar/4-2.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="../../static/tabbar/4-1.png"
        ></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
  export default {
    name:"tabbar",
    props: {
      value: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        showDot: false
      };
    },
    created() {
      if(uni.getStorageSync('token')) {
			  this.getUnreadCount();
		  }
    },
    methods: {
      init() {
        if(uni.getStorageSync('token')) {
          this.getUnreadCount();
        }
      },
      clickTabbar(e) {
        if(e == 0) {
          this.$util.redirectTo('/pages/index/index')
        }else if(e == 1) {
          this.$util.redirectTo('/pages/community/community')
        }else if(e == 2) {
          this.$util.redirectTo('/pages/butler/butler')
        }else {
          this.$util.redirectTo('/pages/mine/mine')
        }
      },
      getUnreadCount() {
        this.$api.sendRequest({
          url: "/sitemessage/api/sitemessage/getNewPerMessageCount",
          data: {},
          success: res => {
            if(res.code == 0) {
              let subscribeCount = Number(res.data.subscribe_count);
              let groupCount = Number(res.data.group_count);
              let mallCount = Number(res.data.mall_count);

              // 判断如果其中有一个不为0，则显示小红点
              if(subscribeCount > 0 || groupCount > 0 || mallCount > 0) {
                this.showDot = true;
              } else {
                this.showDot = false;
              }

            } 
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.u-page {
  padding: 0;

  &__item {

    &__title {
      color: $u-tips-color;
      background-color: $u-bg-color;
      padding: 15px;
      font-size: 15px;

      &__slot-title {
        color: $u-primary;
        font-size: 14px;
      }
    }

    &__slot-icon {
     width: 44rpx;
     height: 44rpx;
    }
  }
}
</style>